<template>
	<view
		class="layout"
		v-show="value"
		@click.prevent.stop="changeModel(customCancle ? true : false)"
		@touchmove.stop.prevent="stopScrolling"
	>
		<view
			@click.stop.prevent
			class="layout-main"
			:animation="animationData"
			:style="{
				height: mainHeight,
				transform: 'translateY(' + mainHeight + ')'
			}"
		>
			<view class="layout-main-title">{{ title }}</view>

			<view class="layout-main-content">
				<scroll-view scroll-y class="actionSheet-main">
					<picker-view indicator-class="picker-view-indicator" :value="activeIndex" @change="pickerViewChange">
						<picker-view-column :key="index" v-for="(item, index) in pickerColumn">
							<view
								:key="subIndex"
								v-for="(subItem, subIndex) in item"
								class="actionSheet-main-item"
								:class="{ active: activeIndex[index] === subIndex }"
							>
								<!-- :class="{active: isActive(index, subIndex, subItem)}" -->
								{{ subItem.label }}
							</view>
						</picker-view-column>
					</picker-view>
				</scroll-view>
			</view>

			<view class="layout-main-footer">
				<block v-if="customCancle">
					<button @click.prevent.stop="customClick">{{ customCancle }}</button>
				</block>
				<block v-else>
					<button @click.prevent.stop="changeModel">取消</button>
				</block>

				<button @click.prevent.stop="changeActiveValue">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
import { getSystemInfo } from '@/utils';

export default {
	name: 'bottomActionSheet',

	props: {
		value: {
			type: Boolean,
			default: false
		},

		activeValue: {
			type: Array,
			default: () => {
				return [];
			}
		},

		title: {
			type: String,
			default: '请选择推广平台'
		},

		delay: {
			type: Number,
			default: 300
		},

		list: {
			type: Array,
			default: () => {
				return [];
			}
		},

		popupHeight: {
			type: [Number, String],

			default: uni.upx2px(620)
		},

		otherParams: {
			type: Object
		},

		customCancle: {
			type: String,
			default: ''
		}
	},

	data() {
		return {
			screenHeight: 0,
			animationData: {},
			activeIndex: [],

			pickerColumn: []
		};
	},

	computed: {
		mainHeight() {
			const { screenHeight, popupHeight } = this;
			/**
			 * 规则小于 1， 取百分百。 大于 或者 不是Numebr 直接赋值
			 */
			const isNumber = typeof popupHeight === 'number';
			if (isNumber && popupHeight <= 1) {
				return `${screenHeight * popupHeight}px`;
			}

			return isNumber ? `${popupHeight}px` : popupHeight;
		}
	},

	watch: {
		value: {
			handler(value) {
				this.changeTranslateY(value);

				if (!value) {
					return;
				}

				this.chagePickerColumn();
			}
		}
	},

	created() {
		const { screenHeight } = getSystemInfo();
		this.screenHeight = screenHeight;

		this.animation = uni.createAnimation({
			duration: this.delay
		});
		// timingFunction: 'ease',
	},

	methods: {
		// 阻止遮罩滚动穿透
		stopScrolling() {
			return;
		},

		chagePickerColumn() {
			const { list, activeValue } = this;
			// console.log(list, activeValue);
			if (!list[0]?.children) {
				this.pickerColumn = [list];
				this.changeActiveIndex();
				return;
			}

			if (!activeValue.length) {
				this.pickerColumn = [list, list[0].children];
			} else {
				this.pickerColumn = [list, list[activeValue[0]].children];
			}

			this.changeActiveIndex();
		},

		changeActiveIndex() {
			this.activeIndex = this.activeValue;
			const { pickerColumn, activeValue } = this;

			if (!activeValue.length) {
				this.activeIndex = Array.from(
					{
						length: pickerColumn.length
					},
					(e) => 0
				);

				return;
			}

			this.activeIndex = this.activeValue;
		},

		pickerViewChange(e) {
			const { list } = this;
			const { value } = e.detail;
			this.activeIndex = value;

			if (value.length > 1) {
				this.pickerColumn = [list, list[value[0]].children];
			}
		},

		changeModel() {
			const { value, delay } = this;

			this.changeTranslateY(!value);

			setTimeout((e) => {
				uni.hideKeyboard();
				this.$emit('input', !this.value);
			}, delay);
		},

		customClick() {
			const { value, delay } = this;

			this.changeTranslateY(!value);

			setTimeout((e) => {
				uni.hideKeyboard();
				this.$emit('input', !this.value);
				this.$emit('customClickFn');
			}, delay);
		},

		changeActiveValue() {
			const { activeIndex, otherParams, pickerColumn } = this;
			const filtersList = activeIndex.map((item, index) => {
				return {
					index: item,
					...pickerColumn[index].find((subItem, subIndex) => subIndex === item)
				};
			});

			this.changeModel();
			this.$emit('changeBottomActionSheet', filtersList, otherParams);
		},

		changeTranslateY(status) {
			let { animation, mainHeight } = this;
			const translateY = status ? 0 : parseInt(mainHeight);

			animation.translateY(translateY).step();
			this.animationData = animation.export();
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);

	&-main {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 620rpx;
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;

		padding-top: 44rpx;
		@include Db_iosBottomDistance();

		&-title {
			color: #191e32;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
		}

		&-content {
			height: 372rpx;
			padding: 20rpx 0;
		}

		&-footer {
			display: flex;

			button {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;

				color: #666;
				font-size: 28rpx;
				border-radius: 0;
				background: #eee;

				&::after {
					display: none;
				}

				&:last-child {
					color: #fff;
					background: $themeColor;
				}
			}
		}
	}

	.actionSheet-main {
		height: 100%;

		picker-view {
			height: 100%;
		}

		/deep/ .picker-view-indicator {
			height: 86rpx;
			border-top: 1px solid #f6f6f6;
			border-bottom: 1px solid#F6F6F6;
		}

		&-item {
			color: #999;
			width: 100%;
			// height: 86rpx !important;
			font-size: 28rpx;
			line-height: 86rpx;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			&.active {
				color: $themeColor;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
}
</style>
